<template>
    <div id="tmpl">
        <!--分类列表-->
        <div id="cate">
            <ul v-bind='{style:"width:"+ulWidth+"px"}'>
                <li @click="getimages(0)">全部</li>
                <li v-for="item in cates" v-text="item.title" @click="getimages(item.id)"></li>
            </ul>
        </div>
        <!--图片列表-->
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind='{to:"/photo/photoinfo/"+item.id}'>
                        <img v-lazy="item.img_url">
                    </router-link>
                    <div class="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';
    import { Lazyload } from 'mint-ui';
    export default{
        data(){
           return {
               ulWidth:320,
               cates:[],
               list:[]
           }
        },
        created(){
            this.getcates();
            //加载图片数据
            var all = 0;
            this.getimages(all)
        },
        methods:{
            getimages(cateid){
                cateid = cateid || 0;
                var url = common.apidomain+'/api/getimages/'+cateid;
                this.$http.get(url).then(function (res) {
                    if(res.body.status!=0){
                        Toast(res.body.message)
                        return;
                    }
                    this.list = res.body.message;
                })
            },
            getcates(){
                var url = common.apidomain + '/api/getimgcategory'
                this.$http.get(url).then(function (res) {
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.cates = res.body.message;
//                    ul动态宽度
                    var width = 74.5;
                    var count= res.body.message.length+1;
                    this.ulWidth = width*count;
                })
            }
        }
    }
</script>
<style scoped>
    #cate{
        min-width: 320px;
        overflow: auto;
     }
    #cate ul{
        padding: 5px 0;
        width: 1000px;
        margin: 0px;
    }
    #cate ul:active{

    }
    #cate ul li{
        list-style: none;
        display: inline-block;
        color: #0094ff;
        font-size: 14px;
        padding: 0 10px;
    }
    #imglist ul{
        padding: 0px;
    }
    #imglist li {
        list-style:none;
        position: relative;
    }
    #imglist li img{
        width: 100%;
        height: 300px;
    }
    .desc{
        width: 100%;
        background-color: rgba(0,0,0,0.2);
        position: absolute;
        bottom:2px;
        left:0px;
    }
    .desc image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
    .desc h5{
        color: white;
        font-weight: bold;;
    }
    .desc p{
        color: white;
    }
</style>